//安装备类型分布
const myChart_option1 = function(data) {
  return {
    tooltip: {
      trigger: "item",
      formatter: "{a}{b}: {c} ({d}%)"
    },

    graphic: {
      type: "text",
      left: "center", // 相对父元素居中
      top: "middle", // 相对父元素居中
      style: {
        fill: "white",
        text: [125876],
        fontSize: "28"
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        hoverAnimation: true,
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          formatter: "{a|{d}%}\n{b|{b}}",
          show: true,
          position: "outside",
          color: "#0153fd",
          verticalAlign: "top",
          rich: {
            a: {
              color: "white",
              lineHeight: 22,
              align: "center",
              fontSize: 15
            },
            b: {
              fontSize: 15,
              color: "#0153fd"
            }
          }
        },
        emphasis: {
          label: {
            rich: {
              a: {
                color: "white",
                lineHeight: 22,
                align: "center",
                fontSize: 15
              },
              b: {
                color: "#16adfc",
                fontSize: 15
              }
            }
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 50,
          lineStyle: {
            color: "#0054ff"
          },
          emphasis: {
            lineStyle: {
              color: "#22d3fd"
            }
          }
        },

        data: [
          {
            value: 22,
            name: "投影仪",
            itemStyle: {
              color: "#906eff"
            }
          },
          {
            value: 28,
            name: "班班通",
            itemStyle: {
              color: "#3457e7"
            }
          },
          {
            value: 22,
            name: "麦克风",
            itemStyle: {
              color: "#3677f5"
            }
          },
          {
            value: 10,
            name: "终端主机",
            itemStyle: {
              color: "#06e7fd"
            }
          },
          {
            value: 18,
            name: "电视机",
            itemStyle: {
              color: "#fd9268"
            }
          },
          {
            value: 18,
            name: "其他",
            itemStyle: {
              color: "#ddb158"
            }
          }
        ]
      }
    ]
  };
};

// 近一年故障分析
const myChart_option2 = function(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    textStyle: {
      color: "#a0a8b9"
    },
    grid: {
      left: "8%",
      bottom: "16%"
    },
    legend: {
      data: ["故障数", "故障率", "维修率"],
      textStyle: {
        color: "#929aad"
      },
      right: "2%",
      top: "0%"
    },
    xAxis: [
      {
        type: "category",
        name: "",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}月"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "故障数",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value}"
        }
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%"
        },
        splitLine: {
          lineStyle: {
            color: "#242847"
          }
        }
      }
    ],
    series: [
      {
        name: "故障数",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0182e8"
            },
            {
              offset: 1,
              color: "#021b4d"
            }
          ]),
          barBorderRadius: 5
        },
        barWidth: "10px",
        data: [146, 130, 106, 180, 107, 160, 150, 140, 160, 170, 180, 190]
      },
      {
        name: "故障率",
        type: "line",
        itemStyle: {
          color: "#fe9c43"
        },
        smooth: true,
        data: [
          2.6,
          5.9,
          9.0,
          26.4,
          28.7,
          70.7,
          175.6,
          182.2,
          48.7,
          18.8,
          6.0,
          2.3
        ]
      },
      {
        name: "维修率",
        type: "line",
        itemStyle: {
          color: "#1cc840"
        },
        yAxisIndex: 1,
        smooth: true,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
};

//map
const myChart_option3 = function(data) {
  var geoCoordMap = {
    黄浦区: [121.490317, 31.222771],
    徐汇区: [121.43752, 31.179973],
    长宁区: [121.4222, 31.218123],
    静安区: [121.448224, 31.229003],
    普陀区: [121.392499, 31.241701],
    闸北区: [121.465689, 31.25318],
    虹口区: [121.491832, 31.26097],
    杨浦区: [121.522797, 31.270755],
    闵行区: [121.375972, 31.111658],
    宝山区: [121.489934, 31.398896],
    嘉定区: [121.250333, 31.383524],
    浦东新区: [121.567706, 31.245944],
    金山区: [121.330736, 30.724697],
    松江区: [121.223543, 31.03047],
    青浦区: [121.113021, 31.151209],
    奉贤区: [121.458472, 30.912345],
    崇明县: [121.397516, 31.626946]
  };
  var data = [
    {
      name: "黄浦区",
      value: {
        count: 500,
        faultCount: 400,
        fixCount: 200,
        averageTime: 121
      }
    }
  ];

  var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };

  return {
    tooltip: {
      trigger: "item",
      formatter: function(params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var name = params.name;
        var value = params.value;
        var res = ` <p style="color:#81fffe">${name}</p>
                    <p>装备数量 : ${value[2].count}</p>
                    <p>故障数量 : ${value[2].faultCount}</p>
                    <p>维修次数 : ${value[2].fixCount}</p>
                    <p>平均保修处理时间 : ${value[2].averageTime}</p>
                  `;
        return res;
      }
    },
    geo: {
      map: "shanghai",
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false, //是否允许缩放
      layoutCenter: ["50%", "50%"], //地图位置
      itemStyle: {
        normal: {
          areaColor: "#0347ad",
          borderColor: "#0ec7ff"
        },
        emphasis: {
          color: "#248ce1" //悬浮背景
        }
      }
    },
    series: [
      {
        name: "设备情况",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: convertData(data),
        // symbolSize: function(val) {
        //   return val[2] / 30;
        // },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#eac736",
            shadowBlur: 10,
            shadowColor: "#05C3F9"
          }
        },
        zlevel: 1
      }
    ]
  };
};

//个行政区故障情况分析
const myChart_option4 = function(data) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "white"
        }
      }
    },
    textStyle: {
      color: "#a0a8b9"
    },
    grid: {
      left: "8%",
      bottom: "16%"
    },
    legend: {
      data: ["故障数", "故障率", "维修率"],
      textStyle: {
        color: "#929aad"
      },
      right: "2%",
      top: "0%"
    },
    xAxis: [
      {
        type: "category",
        name: "",
        data: [
          "北京市",
          "天津市",
          "上海市",
          "广州市",
          "深圳市",
          "芜湖市",
          "郑州市",
          "南京市",
          "广西市",
          "西宁市",
          "西昌市",
          "洛阳市"
        ],
        axisPointer: {
          type: "shadow"
        },
        axisLabel: {
          formatter: "{value}"
        },
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "故障数",

        axisLabel: {
          formatter: "{value}"
        },
        splitLine: {
          lineStyle: {
            color: "#021e72",
          }
        },
      },
      {
        type: "value",
        name: "维修/故障率",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%"
        },
        splitLine: {
          lineStyle: {
            color: "#021e72",
          }
        },
      }
    ],
    dataZoom: [
      {
        show: true,
        height: 8,
        width:'50%',
        xAxisIndex: [0],
        bottom: 5,
        left:'center',
        start: 0,
        end: 50,
        fillerColor:'#197ec2',
        dataBackground:{
          areaStyle:{
            color:'#0a1130',
           
          }
        },
        handleStyle:{
          color: "transparent",
          
        },
        textStyle: {
          color: "#7c82a6"
        },
        borderColor: "#182a6c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35
      }
    ],
    series: [
      {
        name: "故障数",
        type: "bar",
        barWidth: 10,
        stack: "数量",
        itemStyle: {
          color: "#0290fc"
        },
        data: [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41]
      },
      {
        name: "故障率",
        type: "line",
        itemStyle: {
          color: "#ff00ff"
        },
        data: [10, 15, 34, 54, 12, 31, 12, 10, 41, 21, 22, 40]
      },
      {
        name: "维修率",
        type: "line",
        itemStyle: {
          color: "#ff9f25"
        },
        data: [10, 58, 21, 12, 14, 38, 12, 10, 54, 78, 32, 87]
      }
    ]
  };
};

//故障状态分布
const myChart_option5 = function(data) {
  return {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    graphic: {
      type: "text",
      left: "center", // 相对父元素居中
      top: "middle", // 相对父元素居中
      style: {
        fill: "white",
        text: 141,
        fontSize: "28"
      }
    },

    series: [
      {
        name: "",
        type: "pie",
        hoverAnimation: true,
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          formatter: "{a|{d}%}\n{b|{b}}",
          show: true,
          position: "outside",
          color: "#0153fd",
          verticalAlign: "top",
          rich: {
            a: {
              color: "white",
              lineHeight: 22,
              align: "center",
              fontSize: 15
            },
            b: {
              fontSize: 15,
              color: "#0153fd"
            }
          }
        },
        emphasis: {
          label: {
            rich: {
              a: {
                color: "white",
                lineHeight: 22,
                align: "center",
                fontSize: 15
              },
              b: {
                color: "#16adfc",
                fontSize: 15
              }
            }
          }
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 50,
          lineStyle: {
            color: "#0054ff"
          },
          emphasis: {
            lineStyle: {
              color: "#22d3fd"
            }
          }
        },
        data: [
          {
            value: 50,
            name: "待处理",
            itemStyle: {
              color: "#162959"
            }
          },
          {
            value: 32,
            name: "已处理",
            itemStyle: {
              color: "#1ac2fa"
            }
          },
          {
            value: 58,
            name: "处理中",
            itemStyle: {
              color: "#23548b"
            }
          }
        ]
      }
    ]
  };
};

//保修服务分布
const myChart_option6 = function(data) {
  return {
    tooltip: {},
    radar: [
      {
        indicator: [
          { text: "主动服务", max: 50 },
          { text: "微信", max: 50 },
          { text: "400电话", max: 50 },
          { text: "后台保障", max: 50 },
          { text: "QQ群", max: 50 },
          { text: "人工服务", max: 50 }
        ],

        startAngle: 30,
        splitNumber: 4,
        shape: "circle",
        name: {
          formatter: "{value}",
          textStyle: {
            color: "#1ab1ef"
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["#051d64", "#041d64", "#03185f", "#021358"],
            shadowColor: "#0f3ba8",
            shadowBlur: 10
          }
        },
        axisLine: {
          lineStyle: {
            color: "#2c8ebe",
            type: "dashed"
          }
        },
        splitLine: {
          lineStyle: {
            color: "transparent"
          }
        }
      }
    ],
    series: [
      {
        name: "服务分布",
        type: "radar",
        itemStyle: {
          color: "#1f9cf5"
        },
        label: {
          normal: {
            show: true,
            color: "white"
          }
        },
        areaStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
              {
                color: "#093574",
                offset: 0
              },
              {
                color: "#093574",
                offset: 1
              }
            ])
          }
        },
        data: [
          {
            value: [21, 31, 25, 34, 12, 21]
          }
        ]
      }
    ]
  };
};

//rate分类
const myChart_option7 = function(data) {
  return {
    grid: {
      top: 0,
      bottom: 0
    },
    series: [
      {
        name: "故障率",
        center: ["17%", "50%"],
        radius: ["49%", "50%"],
        clockWise: false,
        hoverAnimation: false,
        type: "pie",
        data: [
          {
            value: 65,
            name: "",
            label: {
              normal: {
                show: false,
                formatter: "{d} %",
                textStyle: {
                  fontSize: 28,
                  fontWeight: "bold"
                },
                position: "center"
              }
            },
            itemStyle: {
              normal: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#18c1f8"
                  },
                  {
                    offset: 1,
                    color: "#1d75f0"
                  }
                ]),
                borderWidth: 10
              },
              emphasis: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#85b6b2"
                  },
                  {
                    offset: 1,
                    color: "#6d4f8d"
                  }
                ]),
                borderWidth: 10
              }
            }
          },
          {
            name: " ",
            value: 35,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              },
              emphasis: {
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              }
            }
          }
        ]
      },
      {
        name: "维修率",
        center: ["50%", "50%"],
        radius: ["49%", "50%"],
        clockWise: false,
        hoverAnimation: false,
        type: "pie",
        data: [
          {
            value: 54,
            name: "",
            label: {
              normal: {
                show: false,
                formatter: "{d} %",
                textStyle: {
                  fontSize: 28,
                  fontWeight: "bold"
                },
                position: "center"
              }
            },
            itemStyle: {
              normal: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#29f989"
                  },
                  {
                    offset: 1,
                    color: "#0e9549"
                  }
                ]),
                borderWidth: 10
              },
              emphasis: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#85b6b2"
                  },
                  {
                    offset: 1,
                    color: "#6d4f8d"
                  }
                ]),
                borderWidth: 10
              }
            }
          },
          {
            name: " ",
            value: 46,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              },
              emphasis: {
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              }
            }
          }
        ]
      },
      {
        name: "淘汰率",
        center: ["83%", "50%"],
        radius: ["49%", "50%"],
        clockWise: false,
        hoverAnimation: false,
        type: "pie",
        data: [
          {
            value: 300,
            name: "",
            label: {
              normal: {
                show: false,
                formatter: "{d} %",
                textStyle: {
                  fontSize: 28,
                  fontWeight: "bold"
                },
                position: "center"
              }
            },
            itemStyle: {
              normal: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#ff795e"
                  },
                  {
                    offset: 1,
                    color: "#fe3664"
                  }
                ]),
                borderWidth: 10
              },
              emphasis: {
                color: "#5886f0",
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#85b6b2"
                  },
                  {
                    offset: 1,
                    color: "#6d4f8d"
                  }
                ]),
                borderWidth: 10
              }
            }
          },
          {
            name: " ",
            value: 46,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              },
              emphasis: {
                color: "rgba(0,0,0,0)",
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 0
              }
            }
          }
        ]
      }
    ]
  };
};
